<template>
    <div class="news">
        <div class="header">
            <div class="weather">
                <span>{{ weatherText }}</span>
            </div>
            <div class="more" @click="handleClickMore">更多></div>
        </div>
        <ul class="list">
            <template v-for="(item, index) in news" :key="item">
                <a class="item" :href="item.url" target="_blank">
                    <span class="item-index">{{ index + 1 }}</span>
                    <span class="item-title text-elip">{{ item.title }}</span>
                </a>
            </template>
        </ul>
    </div>
</template>

<script lang="ts" setup>
    import type { News, Weather } from "@/model/briefing";
    import { useHomeStore } from "@/store/home";
    import { computed } from "vue";
    import { useRouter } from "vue-router";

    const homeStore = useHomeStore();
    const news = computed((): News[] => homeStore.briefingData.news.slice(0, 10));

    const weather = computed((): Weather => homeStore.briefingData.weather);
    const weatherText = computed(() =>
        weather.value.weatherOf === "todsy"
            ? "今天"
            : "明天" +
              weather.value.city +
              weather.value.detail?.text_day +
              `，${weather.value.detail?.low}~${weather.value.detail?.high} ℃`
    );

    const router = useRouter();
    const handleClickMore = () => {
        router.push("/newsdetail");
    };
</script>

<style scoped>
    .news {
        width: 100%;
        height: 100%;
        padding: 0.93rem;
        font-size: 0.8rem;
        background-image: linear-gradient(135deg, rgba(20, 20, 20, 0.7), rgba(20, 20, 20, 0.4));
        backdrop-filter: blur(var(--filter-blur));
        border-radius: var(--card-border-radius);
        overflow: hidden;
    }

    .header {
        display: flex;
        justify-content: space-between;
        font-size: 0.87rem;
        color: #f1f1f1;
    }

    .weather {
        display: inline-block;
        position: relative;
    }

    .weather::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 0.3rem;
        width: 100%;
        background-color: #158bb8;
        z-index: -1;
    }

    .more {
        font-size: 0.5rem;
        color: #eee8;
        cursor: pointer;
    }

    .list {
        height: calc(100% - 1.6rem);
        margin-top: 0.67rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .item {
        display: flex;
        align-items: center;
        color: var(--card-text-color);
    }

    .text-elip {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .item-index {
        display: inline-block;
        min-width: 0.53rem;
        margin-right: 0.33rem;
    }

    .item-title {
        flex: 1;
        color: #f1f1f1;
    }

    .item:hover .item-title {
        color: var(--hover-text-color);
    }
</style>
